<template>
  <view class="container">
    <tab-bar :currentPage="currentPage"></tab-bar>
    <!-- 顶部背景图区域 -->
    <view class="top-background">
      <view class="top-content">
        <text class="top-title">政务服务</text>
      </view>
    </view>

    <!-- 中间白色容器 -->
    <view class="content-section">
      <!-- 功能图标区域 -->
      <view class="function-grid">
        <view
          class="function-item"
          v-for="(item, index) in navList"
          :key="index"
          @click="$goBack(item.path)"
        >
          <view class="icon-wrapper">
            <image class="nav_img" :src="item.src1" mode="widthFix"></image>
          </view>

          <text class="nav_text">{{ item.label }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import tabBar from "../../common/tabbar/tabbar.vue";
import { getGovernmentServicesSubMenu } from "@/common/permissionControl";
import { getVehicleList } from "@/common/api/vehicle";
export default {
  components: {
    tabBar,
  },
  data() {
    return {
      currentPage: 0,
      navList: [
        {
          src1: "/static/index/nav1.png",

          label: "营运车辆",
          path: "/pages/hub_ygzw/vehicle/vehicle",
        },
        {
          src1: "/static/index/nav2.png",

          label: "经营业户",
          path: "/pages/hub_ygzw/owner/owner",
        },
        {
          src1: '/static/index/nav3.png',
          label: '从业人员',
          path: "/pages/hub_ygzw/person/person"
        },
        {
          src1: "/static/index/nav4.png",
          label: "统计查询",
          path: "/pages/hub_ygzw/statistical/statistical",
        },
        {
          src1: "/static/index/nav5.png",
          label: "线路查询",
          path: "/pages/hub_ygzw/route/route",
        },
        {
          src1: "/static/index/nav3.png",
          label: "标志牌审核",
          path: "/pages/hub_ygzw/charterapply/charterapply",
        },
        {
          src1: "/static/index/nav4.png",
          label: "监督检查",
          path: "/pages/hub_ygzw/supervision/supervision",
        },
        {
          src1: "/static/index/nav5.png",
          label: "检测管理",
          path: "/pages/hub_ygzw/detection/detection",
        },
        {
          src1: "/static/index/nav3.png",

          label: "动态监管",
          path: "/pages/hub_ygzw/dynamic/dynamic",
        },
        {
          src1: "/static/index/nav4.png",
          label: "问题投诉",
          path: "/pages/hub_ygzw/problem/problem",
        },
      ],
    };
  },
  mounted() {
    uni.hideTabBar();
    this.getVehicleList();
  },

  methods: {
    //请求营运车辆数据
    getVehicleList() {
      getVehicleList().then((res) => {
        console.log(res);
      });
    },
    getGovernmentServicesSubMenu() {
      const role = uni.getStorageSync("userRole");
      this.navList = getGovernmentServicesSubMenu(role);
    },
  },
};
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
}

.top-background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* 确保背景图在最底层 */
  background: url("/static/index/header-bg.png");
  background-size: cover;
  /* 确保背景图片覆盖整个区域 */

  border-radius: 10px;
  position: relative;
  height: 250px;
  /* 可以根据需求调整高度 */
  width: 100%;
}

.top-content {
  position: relative;
  top: 70px; /* 文字距离顶部的距离 */
  text-align: center;
  z-index: 2;
}

.top-title {
  color: white;
  font-size: 24px;
  font-weight: bold;
}

.content-section {
  background-color: #ffffff;
  border-radius: 15px;
  margin: 20px;
  margin-top: -35px; /* 确保内容区域与背景堆叠 */
  position: relative;
  z-index: 3; /* 确保内容区域在背景图之上 */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
}

.function-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25%;
  height: 100px;
  background-color: #ffffff;
  border-radius: 10px;
  margin-bottom: 10px;

  text-align: center;
}

.icon-wrapper {
  margin-bottom: 5px;
  .nav_img {
    width: 40px;
    height: 40px;
  }
}

.function-text {
  font-size: 14px;
  color: #606266;
}
</style>
